<template>
  <div class="header">
    <div class="title">
      日程表
    </div>
    <div class="today">
      <div class="date-nav-button" @click="handlePreviousDateClick"><i class="iconfont icon-icon_arrowleft-01" /></div>
      <div class="date-nav-button current-day" @click="handleCurrentDateClick">{{activeText(active)}}</div>
      <div class="date-nav-button" @click="handleNextDateClick"><i class="iconfont icon-icon_arrowright" /></div>
    </div>
    <div class="date">
        <!--<div v-if="active===0" >{{currentYear}}年{{currentMonth}}月{{currentDay}}日</div>
        <div v-if="active===1||active===2">{{currentYear}}年{{currentMonth}}月</div>-->
      <a-date-picker :allowClear="false" v-if="active===0" :value="moment(new Date(this.currentDate),'YYYY年MM月DD日')"
                     :defaultValue="moment(new Date(this.currentDate),'YYYY年MM月DD日')"
                     :defaultPickerValue="moment(new Date(this.currentDate),'YYYY年MM月DD日')"
                     @change="selectDay" format="YYYY年MM月DD日" :locale="locale" > <span slot="suffixIcon"></span></a-date-picker>

      <a-week-picker :allowClear="false" v-if="active===1" :value="moment(new Date(this.currentDate),'YYYY年MM月DD日')"
                     :defaultValue="moment(new Date(this.currentDate),'YYYY年MM月DD日')"
                     :defaultPickerValue="moment(new Date(this.currentDate),'YYYY年MM月DD日')"
                     @change="selectWeek" format="YYYY年MM月" :locale="locale" > <span slot="suffixIcon"></span></a-week-picker>
      <a-month-picker  :allowClear="false" v-if="active===2" :value="moment(new Date(this.currentDate),'YYYY年MM月')"
                       :defaultValue="moment(new Date(this.currentDate),'YYYY年MM月')"
                       :defaultPickerValue="moment(new Date(this.currentDate),'YYYY年MM月')"
                       @change="selectWeek" format="YYYY年MM月" :locale="locale"><span slot="suffixIcon"></span></a-month-picker>
      <div v-if="active===3">{{currentYear}}年</div>
      <div v-if="active===4">{{currentYear}}年{{currentMonth}}月 ~ {{currentYear+1}}年{{currentMonth}}月</div>

    </div>
    <div class="view">
      <ul>
        <li v-for="(item, index) in views" :key="item" :class="[ active === index ? 'list-active' : '' ]"
            @click="handleViewTypeClick(index)">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import 'moment/locale/zh-cn';
  export default {
    name: "Header",
    props:{
      weekNums:Number,
      panelDateLen:Number,
    },
    data () {
      return {
        locale,
        views: ['日','周','月','年','日程'],
        active: 2,
        currentDate: new Date(),
        weekNum:this.weekNums,
      }
    },
    watch:{
      currentDate(newVal,oldVal){
        this.weekNum = this.weekNums
      }
    },
    computed: {
      currentYear () {
        return this.currentDate.getFullYear()
      },
      currentMonth () {
        return this.currentDate.getMonth() + 1
      },
      currentDay () {
        return this.currentDate.getDate()
      }
    },
    methods: {
      moment,
      handleViewTypeClick (index) {
        // console.log(index)
        this.active = index;
        this.handleDateChange();
      },
      handlePreviousDateClick () {
        const date = this.currentDate
        // 日视图
        if (this.active === 0) {
          this.currentDate = new Date(date.setDate( date.getDate() - 1 ))
          this.handleDateChange()
        }
        // 周视图
        if (this.active === 1) {
          // 上一周的切换
          this.weekNum -= 1;
          if(this.weekNum<0) {
            date.setDate(1)
            this.currentDate = new Date(date.setMonth(date.getMonth() - 1))
          }
          this.$emit('weekChange', this.weekNum)
        }
        // 月视图
        if (this.active === 2) {
          // js setMonth bug
          date.setDate(1)
          this.currentDate = new Date(date.setMonth( date.getMonth() - 1 ))
          this.handleDateChange()
        }

        // 年视图
        if (this.active === 3) {
          // js setMonth bug
          date.setDate(1)
          this.currentDate = new Date(date.setFullYear( date.getFullYear() - 1 ))
          this.handleDateChange()
        }
        // 日程视图
        if (this.active === 4) {
          // js setMonth bug
          date.setDate(1)
          this.currentDate = new Date(date.setMonth( date.getMonth() - 1 ))
          this.handleDateChange()
        }
      },
      handleCurrentDateClick () {
        this.currentDate = new Date()
        this.handleDateChange()
      },
      handleNextDateClick () {
        const date = this.currentDate
        // 日视图
        if (this.active === 0) {
          this.currentDate = new Date(date.setDate( date.getDate() + 1 ))
          this.handleDateChange()
        }
        // 周视图
        if (this.active === 1) {
          // this.currentDate = new Date(date.setDate( date.getDate() + 1 ))
          // 下一周的切换
          this.weekNum +=1;
          if(this.weekNum===this.panelDateLen){
            date.setDate(1)
            this.currentDate = new Date(date.setMonth( date.getMonth() + 1 ))
          }
          this.$emit('weekChange', this.weekNum)
        }
        // 月视图
        if (this.active === 2) {
          // js setMonth bug
          date.setDate(1)
          this.currentDate = new Date(date.setMonth( date.getMonth() + 1 ))
          this.handleDateChange()
        }
       // 年视图
        if (this.active === 3) {
          // js setMonth bug
          date.setDate(1)
          this.currentDate = new Date(date.setFullYear( date.getFullYear() + 1 ))
          this.handleDateChange()
        }
        // 日程视图
        if (this.active === 4) {
          // js setMonth bug
          date.setDate(1)
          this.currentDate = new Date(date.setMonth( date.getMonth() + 1 ))
          this.handleDateChange()
        }
      },
      handleDateChange () {
        this.$emit('dateChange', this.active, this.currentDate)
      },
      activeText(e){
        switch (e) {
          case 0:
            return '今日';
          case 1:
            return '本周';
          case 2:
            return '本月';
          case 3:
            return '本年';
          case 4:
            return '本月';
        }
      },
      selectDay(date,str){
        this.currentDate = new Date(date)
        this.handleDateChange()
      },
      selectWeek(date,str){
        this.currentDate = new Date(date)
        this.handleDateChange()
      },
    }
  }
</script>

<style lang="less" scoped>
  @import '../iconfont/iconfont.css';
  @BorderRadius: 4px;
  @PrimaryColor: #1C72E8;
.header {
  width: 100%;
  height: 58px;
  padding: 8px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 22px;
    font-weight: 500;
    color: #5f6368;
  }
  .today {
    display: flex;
    cursor: pointer;
    .date-nav-button {
      border: 1px solid #dddddd;
      border-radius: @BorderRadius;
      min-width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1px;
      font-size: 16px;
      &:hover {
        background: #F6F6F6;
      }
    }
    .current-day {
      width: 60px;
    }
  }
  .date {
    font-size: 24px;
  }
  .view {
    ul {
      display: flex;
      li {
        list-style: none;
        width: 58px;
        height: 32px;
        border: 1px solid rgba(0,0,0,.15);
        border-right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &:first-child {
          border-top-left-radius: @BorderRadius;
          border-bottom-left-radius: @BorderRadius;
        }
        &:last-child {
          border-top-right-radius: @BorderRadius;
          border-bottom-right-radius: @BorderRadius;
          border-right: 1px solid rgba(0,0,0,.15);
        }
        &:hover {
          background: #F6F6F6;
        }
      }
      .list-active {
        background: @PrimaryColor;
        color: white;
        &:hover {
          background: @PrimaryColor;
        }
      }
    }
  }
}
</style>
<style lang="less">
  .date{
    .ant-input{
      border:0 solid #d9d9d9;
      font-size: 24px;
      cursor: pointer;
    }
    .ant-input:hover{
      border-right-width:0px!important;
    }
  }
</style>